<template>
	<view v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'客户注册'}"></header-top>
		<view class="mainpadding">
			<view class="mainpadding">
				<view class="strongtext">姓名</view>
				<view class="flexleft iteminput">
					<input type="text" placeholder="请输入姓名" v-model="name">
				</view>
				<view class="strongtext margin_top">公司名称</view>
				<view class="flexleft iteminput">
					<input type="text" placeholder="请输入公司名称" v-model="gongsi">
				</view>
				<view class="strongtext margin_top">手机号</view>
				<view class="flexleft iteminput">
					<input type="text" placeholder="请输入手机号" v-model="mobile">
				</view>
				<view class="strongtext margin_top">电话</view>
				<view class="flexleft iteminput">
					<input type="text" placeholder="请输入电话" v-model="tel1">
				</view>
				<view class="strongtext margin_top">意向度</view>
				<view class="flexleft">
					<view class="flexleft iteminput" @click="yxdshow=true">
						<input type="text" placeholder="请选择意向度" v-model="yxd" disabled="">
						<view class="selecticon"></view>
					</view>
					<!-- 意向度 -->
					<u-picker :show="yxdshow" keyName="name" :columns="yxdcolumns" title="选择意向度" @confirm="yxdconfirm"
						@cancel="yxdshow=false"></u-picker>
				</view>
				<view class="strongtext margin_top">店铺地址</view>
				<view class="flexbetween iteminput">
					<uni-data-picker :localdata="items" placeholder="请选择所在的省市区、乡镇" popup-title="请选择地区" v-model="area"
						@change="bindPickerChange">
						<text class="word12" v-if="!area.length">请选择所在的省市区、乡镇</text>
						<text class="word13" v-else>{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
					</uni-data-picker>
					<view class="address"></view>
				</view>
				<view class="strongtext margin_top">详细地址</view>
				<view class="flexbetween iteminput">
					<input type="text" placeholder="请输入详细地址" v-model="xxaddress">
					<view class="address" @click="getLocation"></view>
				</view>
				<view class="strongtext margin_top">选择行业</view>
				<view class="flexleft">
					<view class="flexleft iteminput" @click="hyshow=true">
						<input type="text" placeholder="请选择行业" v-model="hy" disabled="">
						<view class="selecticon"></view>
					</view>
					<!-- 行业 -->
					<u-picker :show="hyshow" keyName="name" :columns="hycolumns" title="选择行业" @confirm="hyconfirm"
						@cancel="hyshow=false"></u-picker>
				</view>
				<view class="strongtext margin_top">规模等级</view>
				<view class="flexleft">
					<view class="flexleft iteminput" @click="gmdjshow=true">
						<input type="text" placeholder="请选择规模等级" v-model="gmdj" disabled="">
						<view class="selecticon"></view>
					</view>
					<!-- 规模等级 -->
					<u-picker :show="gmdjshow" keyName="name" :columns="gmdjcolumns" title="选择行业" @confirm="gmdjconfirm"
						@cancel="gmdjshow=false"></u-picker>
				</view>
				<view class="strongtext margin_top">经营区域</view>
				<view class="flexbetween iteminput">
					<input type="text" placeholder="请输入经营区域" v-model="jyvalue">
				</view>
				<view class="strongtext margin_top">备注</view>
				<view class="flexbetween iteminput">
					<input type="text" placeholder="请输入备注" v-model="notes">
				</view>
				<view class="btn margin_top flexcenter" @click="nextclick">确定</view>
			</view>

		</view>
	</view>
</template>
<script>
	const httpRequest = require("@/common/httpRequest.js")
	import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/keypress.js';
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				area: [], // 选择地区内容
				address: {
					province: "",
					city: "",
					county: ""
				},
				items: citys.data, // 选择地区内容
				// 意向度
				yxd: "", //意向度
				yxdshow: false,
				yxdcolumns: [],
				yxdid: "",
				// 行业
				hy: "",
				hyshow: false,
				hycolumns: [],
				hyid: "",
				// 规模等级
				gmdj: "",
				gmdjshow: false,
				gmdjcolumns: [],
				gmdjid: "",
				name: "", //姓名
				gongsi: "", //公司
				mobile: "", //手机号
				tel1: "", //电话
				xxaddress: "", //详细地址
				jyvalue: "", //经营范围
				notes: "", //备注
				listid: "",
				pageShow: false
			}
		},
		onLoad(options) {
			if (options.id) {
				this.listid = options.id
				this.getdetail(options.id)
			}
			this.getscreen()
		},
		methods: {
			getdetail(id) {
				httpRequest.request('/employeesapi/shop/detail', 'POST', {
					id
				}).then(res => {
					let data = res.data
					this.name = data.khname
					this.gongsi = data.name
					this.mobile = data.tel
					this.tel1 = data.tel1 || ""
					this.yxd = data.intention.name
					this.yxdid = data.intention.id
					this.hy = data.industry.name
					this.hyid = data.industry.id
					this.gmdj = data.scalelevel.name
					this.gmdjid = data.scalelevel.id
					this.address.province = data.province
					this.address.city = data.city
					this.address.county = data.district
					this.area = data.cityinfo.split("/")
					this.xxaddress = data.address_detail
					this.jyvalue = data.jyqy
					this.notes = data.notes || ""
				})
			},
			nextclick() {
				if (this.name == "") {
					httpRequest.toast("请填写姓名")
					return false
				}
				if (this.gongsi == "") {
					httpRequest.toast("请填写公司名称")
					return false
				}
				if (this.mobile == "") {
					httpRequest.toast("请填写手机号")
					return false
				}
				if (!this.mobile.match(/^1\d{10}$/)) {
					httpRequest.toast("请输入有效的手机号码");
					return false;
				}
				// if (!this.tel1.match(/^1\d{10}$/)) {
				// 	httpRequest.toast("请输入有效的手机号码");
				// 	return false;
				// }
				if (this.yxd == "") {
					httpRequest.toast("请选择意向度")
					return false
				}
				if (this.area.length == 0) {
					httpRequest.toast("请选择店铺地址")
					return false
				}
				if (this.xxaddress == "") {
					httpRequest.toast("请填写详细地址")
					return false
				}
				if (this.hy == "") {
					httpRequest.toast("请选择行业")
					return false
				}
				if (this.gmdj == "") {
					httpRequest.toast("请选择规模等级")
					return false
				}
				if (this.jyvalue == "") {
					httpRequest.toast("请选择经营区域")
					return false
				}
				this.submit()
			},
			getLocation() {
				const _this = this
				uni.chooseLocation({
					success: function(response) {
						console.log('位置名称:', response);
						// _this.detailed = response.address
						_this.xxaddress = response.address.replace(/.+?(省|市|自治区|自治州|县|区)/g, '');
					},fail(err) {
						console.log("错误信息",err);
					}
				})
			},
			getscreen() {
				this.gethy() //行业
				this.getyxd() //意向度
				this.getgmdj() //规模等级
				this.pageShow = true
			},
			// 获取行业
			gethy() {
				httpRequest.request('/employeesapi/index/getindustry', 'POST', {}).then(res => {
					this.hycolumns.push(res.data)
				})
			},
			// 获取意向度
			getyxd() {
				httpRequest.request('/employeesapi/index/getintention', 'POST', {}).then(res => {
					this.yxdcolumns.push(res.data)
				})
			},
			// 获取规模等级
			getgmdj() {
				httpRequest.request('/employeesapi/index/getscalelevel', 'POST', {}).then(res => {
					this.gmdjcolumns.push(res.data)
				})
			},
			// 意向度确定
			yxdconfirm(e) {
				this.yxdshow = false
				this.yxdid = e.value[0].id
				this.yxd = e.value[0].name
			},
			// 行业确认
			hyconfirm(e) {
				this.hyshow = false
				this.hyid = e.value[0].id
				this.hy = e.value[0].name
			},
			// 规模等级确认
			gmdjconfirm(e) {
				this.gmdjshow = false
				this.gmdjid = e.value[0].id
				this.gmdj = e.value[0].name
			},
			// 确认提交
			submit() {
				let url = "/employeesapi/shop/addManyShop"
				let data = {
					tel: this.mobile, //手机
					tel1: this.tel1, //电话
					khname: this.name, //客户名称
					name: this.gongsi, //公司名称
					province: this.address.province, //省
					city: this.address.city, //市
					district: this.address.county, //区
					address_detail: this.xxaddress, //详细地址
					industry_id: this.hyid, //行业id
					intention_id: this.yxdid, //意向度id
					scale_level_id: this.gmdjid, //规模等级id
					jyqy: this.jyvalue,
					notes: this.notes,
					id: this.listid
				}
				if (this.listid) {
					url = "/employeesapi/shop/editManyShop"
				} else {
					delete data.id
				}
				httpRequest.request(url, 'POST', data).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 500)
					}
				})
			},
			bindPickerChange(val) { // 选择地区内容
				let area = val.detail.value
				this.area = [area[0].text, area[1].text, area[2].text];
				this.address.province = area[0].value;
				this.address.city = area[1].value;
				this.address.county = area[2].value;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.strongtext {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.margin_top {
		margin-top: 20rpx;
	}

	.iteminput {
		padding: 20rpx 30rpx;
		border: 1rpx solid #999999;
		border-radius: 10rpx;
	}

	.iteminput {
		input {
			width: 100%;
		}
	}

	// 上传图片
	.bigbox {
		height: 325rpx;
		width: 100%;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #999999;
		position: relative;
	}

	.bigboxborder {
		border: 1rpx solid #999999;
	}

	.selecticon {
		margin-left: 10rpx;
		background-image: url('@/static/imags/upload/select.png');
		background-size: 100% 100%;
	}

	.selecttext {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #999999;
	}

	.address {
		width: 50rpx;
		height: 47rpx;
		background-image: url("@/static/imags/upload/address.png");
		background-size: 100% 100%;
	}
</style>